<template>
	<div>
		<el-upload
			class="upload-demo"
			:show-file-list="false"
			:http-request="bindUploadBigFile"
			:before-upload="handlerBeforeUpload"
		>
			<template #trigger>
				<el-button type="primary" @click="bindResetFileUpload">上传大文件</el-button>
			</template>
		</el-upload>
		<el-button @click="bindPauseDownLoad">暂停</el-button>
		<el-button @click="bindGoDownLoad">继续</el-button>
		<div style="margin: 10px 0">
			<el-progress :text-inside="true" :stroke-width="16" :percentage="percentage.total===0?0:parseInt(''+(percentage.value)/(percentage.total)*100)" />
		</div>
		<div class="m-video" v-show="vedioUrl">
			<p>文件地址: {{ vedioUrl }}</p>
			<el-button @click="bindOpenVideo">查看</el-button>
		</div>
		<el-dialog
			title="视频播放"
			v-model="videoOpen"
			@close="bindColoseVideo"
			width="850px"
			height="400px"
			append-to-body
			class="video_box"
		>
			<Vue3VideoPlay v-if="videoOpen" :url="vedioUrl"></Vue3VideoPlay>
		</el-dialog>
		<!-- 视频列表 -->
		<TablePlus :columns="columns" :request-api="RequestVedioList" :initParam="initParam" :propCallback="propCallback">
			<template #createtime="{ row }">
				<span>{{ dayjs(row.createtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
			</template>
			<template #url="{ row }">
				<el-button type="primary" :icon="EditPen" @click="bindPlay(row.url)">播放</el-button>
				<el-button type="success" :icon="Delete" @click="bindDeleteVedio(row.id)">删除</el-button>
			</template>
		</TablePlus>
	</div>
</template>
 
<script setup lang="ts">
import Vue3VideoPlay from '@/components/Vue3VideoPaly.vue'
import TablePlus from '@/components/TablePlus/index.vue'
import { useVedio } from '@/hooks/vedio'
import { dayjs } from 'element-plus'
import { EditPen, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { RequestVedioList } from '@/api/path/music'
import { filterImageUrl } from '@/utils'

const {
	vedioUrl,
	percentage,
	initParam,
	bindUploadBigFile,
	handlerBeforeUpload,
	bindResetFileUpload,
	bindDeleteVedio,
	bindPauseDownLoad,
	bindGoDownLoad
} = useVedio()
const videoOpen = ref<boolean>(false)

const bindOpenVideo = () => {
	videoOpen.value = true
}
const bindColoseVideo = () => {
	videoOpen.value = false
}

const columns = [
	{ prop: 'id', label: '序号', width: '100px' },
	{ prop: 'title', label: '标题' },
	{ prop: 'nick', label: '昵称', search: { key: 'nick', el: 'input' } },
	{ prop: 'createtime', label: '创建时间', search: { el: 'datepicker' } },
	{ prop: 'url', label: '视频' }
]

const propCallback = (data: any) => {
	const arr = data.createtime
	const startTime = arr[0]
	const endTime = arr[1]
	if (startTime === endTime) return
	data.startTime = dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
	data.endTime = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
}

const bindPlay = (url: string) => {
	vedioUrl.value = filterImageUrl(url)
	bindOpenVideo()
}
</script>

<style scoped lang="scss">
.upload-demo {
	.el-button {
		width: 80px;
		height: 20px;
		font-size: 12px;
	}
}
.m-video {
	display: flex;
	align-items: center;
	p {
		margin-right: 5px;
	}
}
</style>
